<template>
	<view class="box">
		<!-- 左侧图片 -->
		<view class="box-l"></view>
		<!-- 右侧文字说明 -->
		<view class="box-r" @click="goCouponPage()">
			<!-- 上边文字 -->
			<view class="text-t">店铺满赠</view>
			<!-- 下边文字 -->
			<view class="text-b">提升客单做满赠</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goCouponPage() {
				this.goPage(`/pages/marketing/fullGiftList/index`)
			},
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss">
	//	盒子
	.box {
		width: 180px;
		height: 80px;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;

		//	卡片左侧图片
		.box-l {
			width: 40px;
			height: 40px;
			background-color: red;
			margin-right: 10px;
		}

		//	卡片右侧文字
		.box-r {
			height: 100%;
			font-weight: 600;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;

			//	顶部文字
			.text-t {
				font-size: 16px;
				color: #171717;
			}

			//	底部文字
			.text-b {
				font-size: 14px;
				color: #7c7c7c;
			}
		}
	}
</style>